<!DOCTYPE html>
<html>
<body>
  <div id="root"></div>
</body>
<script src="./babel.min.js"></script>
<script src="./react.development.js"></script>
<script src="./react-dom.development.js"></script>

<script type="text/babel">
// 1. 创建类式组件, 必须继承React.Component， 必须要有render方法，render方法必须有返回
class MyComponent extends React.Component{
  //render是放在哪里的？ --MyComponent的原型对象上，供实例使用
  // render中的this是谁？ -- myComponent组件实例对象
  render(){
    console.log('render中的this:', this)
    return <h2>我是用类定义的组件（适用于【复杂组件】的定义）</h2>
  }
}

// 2 渲染组件到页面
ReactDOM.render(<MyComponent/>, document.getElementById("root"))
/*
执行了ReactDOM.render 之后，发生了什么？
1. React解析组件标签，找到了MyComponent组件
2.发现组件是使用类定义的，随后new出来该类的实力，并通过实现调用原型生的render方法
将render返回出来的虚拟Dom转为真实Dom，随后呈现到页面中
*/
</script>
</html>